{%extends "base.html"%}
{%block title%}
习题集列表
{%endblock%}
{%block body%}

<script>
    let problemset;
    $(document).ready(() => {
        let page = parseInt(window.location.href.split("/").pop());
        if (isNaN(page)) page = 1;
        page = new Vue({
            el: "#problemset-list",
            delimiters: ['{[', ']}'],
            data: {
                data: null,
                done: false,
                currentPage: page,
                pageCount: 0,
                loading: false
            }, methods: {
                create() {
                    axios.post("/api/problemset/create").then(resp => {
                        let data = resp.data;
                        if (data.code) {
                            showErrorModal(data.message);
                            return;
                        }
                        window.open("/problemset/show/" + data.data.id, "_blank");
                        // window.location.href = "/problemset/show/" + data.id;
                    });
                },
                jumpto(page) {
                    console.log(page);
                    window.location.href = "/problemset/list/" + page;
                },
                itemClicked(item) {
                    if (item.private && !item.accessible) {
                        $("#invitation-code-modal input").val("");
                        $("#invitation-code-modal").modal({
                            onApprove: () => {
                                let code = $("#invitation-code-modal input").val();
                                axios.post("/api/problemset/join_private_problemset", { id: item.id, code: code }).then(resp => {
                                    let data = resp.data;
                                    if (data.code) {
                                        showErrorModal(data.message);
                                        return;
                                    } else {
                                        window.open("/problemset/show/" + item.id, "_blank");
                                    }
                                });
                            }
                        }).modal("show");
                    } else {
                        window.open("/problemset/show/" + item.id, "_blank");
                    }
                }
            }, mounted() {
                axios.post("/api/problemset/list", { page: this.currentPage }).then(resp => {
                    let data = resp.data;
                    if (data.code) {
                        showErrorModal(data.message);
                        return;
                    }

                    this.data = data.data;
                    this.pageCount = this.data.pageCount;
                    this.done = true;
                    console.log(this.data.items);
                });
            }
        });

    });
</script>
<div id="problemset-list" v-if="done">
    <div class="ui header">
        <h1>习题集</h1>
    </div>
    <div class="ui segment stacked">
        <div class="ui dimmer" v-bind:class="{active:loading}">
            <div class="ui loader"></div>
        </div>
        <div class="ui right aligned container">
            <div class="ui green button" v-on:click="create">创建</div>
        </div>
        <div class="ui divider"></div>
        <table class="ui very basic table">
            <thead>
                <tr>
                    <th class="center aligned">
                        名称
                    </th>
                    <th class="center aligned">
                        权限
                    </th>

                    <th class="center aligned">
                        题目数量
                    </th>
                    <th class="center aligned">
                        创建者
                    </th>
                    <th class="center aligned">
                        创建时间
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in data.items">
                    <td class="center aligned">
                        <a v-on:click="itemClicked(item)" style="cursor: pointer;">{[item.name]}</a>
                    </td>
                    <td class="center aligned"
                        v-bind:class="{positive:item.accessible||!item.private,negative:!(item.accessible||!item.private)}">
                        <div v-if="item.private">
                            <i class="lock icon" v-if="!item.accessible"></i>
                            <i class="lock open icon" v-else></i>
                        </div>
                        <div v-else>
                            公开
                        </div>
                    </td>
                    <td class="center aligned">
                        <div v-if="item.problemCount!=-1">
                            {[item.problemCount]}
                        </div>
                    </td>
                    <td class="center aligned">
                        <a :href="'/profile/'+item.owner.uid" target="_blank">{[item.owner.username]}</a>
                    </td>

                    <td class="center aligned">
                        {[item.createTime]}
                    </td>

                </tr>
            </tbody>
        </table>

    </div>
    <page-menu v-bind:page-count="pageCount" v-bind:callback="jumpto" v-bind:current-page="currentPage"></page-menu>
</div>
<div class="ui tiny modal" id="invitation-code-modal">
    <div class="header">
        请输入此习题集的邀请码
    </div>
    <div class="center aligned content">
        <div class="ui center aligned container">

            <div class="ui input">
                <input>
            </div>
        </div>
    </div>
    <div class="actions">
        <div class="ui red button">
            取消
        </div>
        <div class="ui positive right labeled icon button">
            确认
            <i class="checkmark icon"></i>
        </div>
    </div>
</div>
{%endblock%}